<template>
  <div style="height: 666px; padding-top: 4px">
      <!-- <div style="font-size: 15px;background-color: rgb(247,248,250);margin-top:10px"> -->
    <div
      style="
        font-size: 18px;
        text-align: center;
        /*font-weight: bold;*/
        /*padding-left: 10px;*/
        width: 365px;
        height: 250px;
        margin-top:10px;
      "
    >    
    <!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <p>刷新次数: {{ count }}</p>
    </van-pull-refresh> -->
    <div class="container" >
        <!-- <div class="component"></div> -->
        
        <!-- <button @click="handleButtonClick" class="white-button" id="revenue-button"></button> -->

        <div class="home">
<!--          <div @click="handleButtonClick1" :class="[checked?'blue-button2':'blue-button']" >-->
          <div @click="handleButtonClick1" class="base-blue-button" :style="setBlueBtnColor()">
            <div style="margin-left: 20px; margin-top: 23px">
              <div style="font-size: 16px; white-space: nowrap; text-align: left;">
                当日交易额
              </div>
              <div style="font-size: 32px; white-space: nowrap;text-align: left;margin-top: 5px; font-weight: bold;">
                {{ dayRevenue| formatfilter  }}<span style="font-size: 16px; margin-left: 2px">元</span>
              </div>
            </div>
          </div>
          <!-- <button @click="handleButtonClick" class="blue-button">
          <span>交易</span>
          <span>明细</span>
         </button> -->
          <div class="component1"></div>
          <!-- <van-button type="primary">主要按钮</van-button> -->
<!--          <div @click="handleButtonClick2" :class="[checked?'red-button2':'red-button']">-->
          <div @click="handleButtonClick2" class="base-red-button" :style="setRedBtnColor()">
            <div style="margin-left: 20px; margin-top: 23px">
              <div style="font-size: 16px; white-space: nowrap; text-align: left">
                当日交易单数
              </div>
              <div style="font-size: 32px; white-space: nowrap;text-align: left;margin-top: 5px; font-weight: bold;">
                {{ daycount| formatfilter  }}<span style="font-size: 16px; margin-left: 2px">笔</span>
              </div>
            </div>
          </div>
        </div>

        <!-- <div class="home" >       -->
        <!-- <van-button plain type="info" @click="showFormHandler">设定目标</van-button>
        <div class="component1"></div>
        <van-button plain type="info">生成报告</van-button>    -->
        <div class="component"></div>
          <div @click="handleButtonClick"  :class="[checked?'white-button2':'white-button1']">
            <div style="margin-left: 0px; margin-right: 0px">
            <!-- <div style="font-size: 16px; white-space: nowrap; text-align: center; margin-bottom: 5px"> -->
              <div style="font-size: 16px; white-space: nowrap; text-align: center;">  
              月累计营业额
            </div>
            <div style="font-size: 32px; white-space: nowrap; text-align: center; ">
              {{ monthlyRevenue| formatfilter  }}<span style="font-size: 16px">元</span>
            </div>
          </div>
        </div>
      </div>
      
     <!-- <div style="display: flex; justify-content: flex-end; margin-right: 15px; margin-top: 10px">-->
<!--        <van-popover-->
<!--          v-model="showPopover"-->
<!--          trigger="click"-->
<!--          :actions="actions"-->
<!--          @select="handleSelect"-->
<!--        >-->
<!--            <template #reference>-->
<!--            </template>-->
<!--        </van-popover>-->
<!--      </div> -->
    <!-- <van-cell is-link @click="showPopup">展示弹出层</van-cell> -->
    <div >
     <van-popup v-model="show" style=" display: flex; width:250px; border-radius: 5px;">
      <van-form v-if="showForm">
        <van-field
          v-model="goal"
          type="number"
          name="目标"
          label="设定目标(元)"
          placeholder="目标"
          :rules="[{ required: true, message: '请填写目标' }]"
        />
        <div style="margin: 16px; display: flex;justify-content: center;">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            style=" width:60px;height:30px;font-size: 10px; "
            @click="handleSubmit"
            >提交</van-button
          >
        </div>
      </van-form>
     </van-popup>
    </div>
      

      <!-- <div class="component"></div> -->
      <div class="component" v-if="showChart"></div>

      <!-- <div id="chart" style="width: 100%; height: 400px;"></div>             -->

    </div>
    <div style="position: relative;width: 100%; height: 400px; margin-top: 20px;">
      <div ref="chart" class="centerButton" id="chart" style="width: 375px; height: 400px"></div>
      <div style="display: flex; justify-content: flex-end;">
        <van-button icon="plus"  size="small" @click="showreport" style="margin-right:10px;">生成报告</van-button>
      </div>
      <div class="centerButton">
        <div style="display: flex; flex-direction: row;"> 
        <div style="font-size: 11px;">年度目标：{{this.goal| formatfilter  }}元</div>
        <!-- <button @click="click1" style="width: 50px; height: 20px;"><img src="../assets/pencil.png"></button>border: none; -->
        <!-- <button @click="showFormHandler" style=" background-image: url('../assets/pencil.png'); background-size: cover; background-repeat: no-repeat;"></button>  -->
        <van-icon @click="showPopup" name="edit" size="10px"/>
      </div>
        <div style="font-Size: 30px;font-Weight: bold;">{{(this.totalValue/this.goal*100).toFixed(2)| formatfilter }}%</div>
        <div style="font-size: 11px;">已完成金额：{{this.totalValue| formatfilter }}元</div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Dialog } from "vant";
import * as echarts from "echarts";
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  name: "pieChartRadius",
  props: {
    valBox: Object,
  },

  data() {
    return {
      count: 0,
      isLoading: false,
      // checked: false,
      choiceShow: true,
      choiceActions: [
        {
          name: "正常模式",
        },
        {
          name: "夜间模式",
        },
      ],
      activeColor: "#409EFF",
      active: 0,
      show: false,
      activeColorBlueBtn: "#409EFF",
      //  气泡弹出框
      showPopover: false,
      actions: [{ text: "设定目标" }, { text: "生成报告" }],
      // 按钮数据
      year: "",
      month: "",
      totalValue: 0,
      monthlyRevenue: 0, // 初始化为0
      dayRevenue: 0,
      daycount: 0,
      // 百分比图
      showForm: false,
      showChart: false,
      goal: 10000000000000,

      // imageSrc: 'E:/knowledge/junior/enterprise/工商/230711前端/file/src/assets/logo2.jpg', // 替换为实际图片的URL
      text: "账户昵称", // 替换为实际的文字内容
      targetValue: 0, // 弹窗输入的value
      color1: ["rgb(109, 184, 255)", "rgb(232, 232, 232)"],
      color2: ["rgb(65,65,76)", "rgb(162,158,158)"],
    };
  },
  // http::113.106.111.75:8081/merchanthome/daily-total?year='+ year +'&month='+month
  computed: {
    checked(a, b) {
      return this.$store.state.checked;
    },
    color(){
      // return this.$store.state.checked ? this.color2 : this.color1
      return this.$store.state.mainpageBtnPieColor[this.$store.state.styleNum]
    },
    styleNum: {
      get() {
        return this.$store.state.styleNum
      },
    },
    mainpageBtnColor: {
      get() {
        return this.$store.state.mainpageBtnColor
      },
    },
    mainpageBtnPieColor: {
      get() {
        return this.$store.state.mainpageBtnPieColor
      },
    },
  },
  watch: {
    checked(a,b){
      // this.checked?this.activeColor = '#354349':this.activeColor = "#409EFF"
      // this.checked ? this.color= [] : this.color = ["rgb(24, 144, 255)", "rgb(232, 232, 232)"]
    },
    color() {
      this.createchart();
    },
  },
  filters: {},
  created() {},
  async mounted() {
    // url:'',
    // 默认data
    
    // this.monthlyRevenue = 230187.33;
    // this.dayRevenue = 981.33;
    // this.daycount = 81;
    // this.goal = 20000000;
    // this.totalValue = 1000000;
    // test
    this.chart = echarts.init(document.getElementById("chart"));
    this.createchart();

    const currentDate = new Date();
    this.year = currentDate.getFullYear();
    this.month = currentDate.getMonth() + 1; // getMonth()返回的是0-11，所以要加1
    this.day = currentDate.getDate();
    // this.regex = /\d+(\.\d+)?/;
    await this.getData(); //月营业额
    await this.getData1(); //交易额
    await this.getData2(); //交易单数
    await this.getData3(); //年营业额
    await this.getData4(); //目标值
    // this.sendData();
    // this.dataProcessing();
    // this.handleSubmit();
    this.showForm = false;
    // console.log(this.$refs.myForm.fields[0].value); // 输出 goal 值
    // console.log(this.goal); // 输出 goal 值
    // // 获取目标值
    // const goalValue = this.goal;
    // // 创建图表
    // this.chart = echarts.init(document.getElementById('chart'));
    // await this.sendData();
    // this.createchart();
  },
  methods: {
    setBlueBtnColor() {
      return {
        "background": this.mainpageBtnColor[this.styleNum][0],
      };
    },
    setRedBtnColor() {
      return {
        "background": this.mainpageBtnColor[this.styleNum][1],
      };
    },
    async showreport(){
      this.closeFormHandler();
      const url = "/merchanthome/PDF"

      console.log(url)
      const {code, data} = await this.$http.get(
          url
      );
      console.log(data.data)
      // window.open("http://113.106.111.75:81/pdf/id1_year2023_out_a.pdf")
      window.open(data.data)
    },
    showPopup() {
      this.show = true;
      this.showForm = true;
    },
    click1(){
      console.log("click1")
    },
    // 报告处理函数
    generateReport(){
      
    },
    // 选择框改动
    async handleSelect(option) {
    if (option.text === "设定目标") {
      // 执行设定目标的函数
      this.showFormHandler();
    } else if (option.text === "生成报告") {
      // 执行生成报告的函数

      this.closeFormHandler();
      const url = "/merchanthome/PDF"

      console.log(url)
      const {code, data} = await this.$http.get(
          url
      );
      console.log('@' + data.data)
      // window.open("http://113.106.111.75:81/pdf/id1_year2023_out_a.pdf")
      window.open("http://113.106.111.75:81/pdf/id1_year2023_out_a.pdf")
      // this.generateReport();
    }
    },
    // test 计数
    // onRefresh() {
    //   setTimeout(() => {
    //     Toast('刷新成功');
    //     this.isLoading = false;
    //     this.count++;
    //   }, 1000);
    // },

    showModel() {
      alert(1);
      this.choiceShow = true;
    },
    handleButtonClick() {
      this.$router.push("/method");
    },
    handleButtonClick1() {
      this.$router.push("/detail");
    },
    handleButtonClick2() {
      this.$router.push("/compare");
    },

    // 传输数据到数据库
    // async sendData() {
    //   console.log('this.goal',this.goal)
    //   var data = {
    //     id: 1,
    //     target: parseFloat(this.goal) // Convert the target sales to a floating-point number
    //   };

    //   fetch("http://127.0.0.1:8080/merchanthome/yearly-targets", {
    //     method: "POST",
    //     headers: {
    //       "Content-Type": "application/json"
    //     },
    //     body: JSON.stringify(data)
    //   })
    //     .then(response => response.json())
    //     .then(data => console.log(data));
    // },
    // 连接数据库
    // 月累计营业额
    async getData() {
      // const url = "http://127.0.0.1:8080/merchanthome/daily-total?year=2023&month=7&id=1"
      // const url = `http://127.0.0.1:8080/merchanthome/daily-total?year=${this.year}&month=${this.month}&id=1`;
      // const url = `http://localhost:8080/merchanthome/daily-total?year=2023&month=7&id=1`;
      const url = `/merchanthome/daily-total?year=2023&month=7&id=1`;
      console.log("url", url);
      const data = await this.$http.get(url);
      // console.log('data',data.data.data);
      // console.log('data',data.data.data);
      // const datatrans = data.data.data.match(this.regex) ? parseFloat(data.data.data.match(this.regex)[0]):null;
      // this.monthlyRevenue = data.data.toFixed(2);
      // console.log('datatrans',datatrans );
      // this.monthlyRevenue = datatrans;
      this.monthlyRevenue1 = data.data.data.toFixed(2);
    },
    // 当日交易额
    async getData1() {
      // const url1 = "http://127.0.0.1:8080/merchanthome/daily-sales?year=2023&month=7&id=1"
      // const url1 = `http://127.0.0.1:8080/merchanthome/daily-sales?year=${this.year}&month=${this.month}&id=1`;
      // const url1 = `http://127.0.0.1:8080/merchanthome/daily-sales`;
      // const url1 = `http://127.0.0.1:8080/merchanthome/daily-sales?sum=${this.dayRevenue}`
      const url1 = `/merchanthome/daily-sales?sum=${this.dayRevenue}`
      // console.log(url1)
      const data1 = await this.$http.get(url1);
      // // console.log(data1)
      // const datatrans1 = data1.data.data.match(this.regex) ? parseFloat(data1.data.data.match(this.regex)[0]):null;
      // console.log('datatrans1',datatrans1.toFixed(2));
      // this.dayRevenue = datatrans1.toFixed(2);
      // // this.dayRevenue = data1.data.toFixed(2);
      // // console.log(this.dayRevenue);
      this.dayRevenue = data1.data.data.toFixed(2);
      this.monthlyRevenue =
        parseFloat(this.monthlyRevenue1) + parseFloat(this.dayRevenue);
      // this.havedata1 = data1.data.code;
      // console.log('have',this.havedata1);
      // if ((this.havadata1 = 1)) {
      //   const postData1 = {
      //     year: this.year,
      //     month: this.month,
      //     id: 1,
      //     data: this.monthlyRevenue
      //   };
      //   this.$http.post(url1, postData1)
      //     .then(response => {
      //       // 处理POST请求的响应
      //       console.log(response.data);
      //     })
      //     .catch(error => {
      //       // 处理POST请求的错误
      //       console.error(error);
      //     });
      // };
      },
    // 当日交易单数
    async getData2() {
      // const url2 = "http://127.0.0.1:8080/merchanthome/daily-transaction-count?year=2023&month=7&id=1"
      // const url2 = `http://127.0.0.1:8080/merchanthome/daily-transaction-count?year=${this.year}&month=${this.month}&day=${this.day}&id=1`;
      // const url2 = `http://127.0.0.1:8080/merchanthome/daily-transaction-count`;
      // const url2 = `http://127.0.0.1:8080/merchanthome/daily-transaction-count?sum=${this.daycount}`
      const url2 = `/merchanthome/daily-transaction-count?sum=${this.daycount}`
      // console.log(url2)
      const data2 = await this.$http.get(url2);
      // const datatrans2 = data2.data.data.match(this.regex) ? parseFloat(data2.data.data.match(this.regex)[0]):null;

      // console.log(data2)
      // console.log('datatrans2',datatrans2.toFixed(2));
      // this.daycount = datatrans2;
      this.daycount = data2.data.data;
    },
    // 年度营业额
    async getData3() {
      // const url2 = "http://127.0.0.1:8080/merchanthome/daily-transaction-count?year=2023&id=1"
      // const url3 = `http://127.0.0.1:8080/merchanthome/getamount?year=${this.year}&id=1`;
      // const url3 = `http://127.0.0.1:8080/merchanthome/getamount?year=2023&id=1`;
      const url3 = `/merchanthome/getamount?year=2023&id=1`;
      // console.log(url2)
      const data3 = await this.$http.get(url3);
      // console.log(data2)
      // this.totalValue = data3.data;
      // const datatrans3 = data3.data.data.match(this.regex) ? parseFloat(data3.data.data.match(this.regex)[0]):null;
      // console.log(data3.data)
      // const datatrans3 = data3.data.toFixed(2);
      // // this.totalValue = parseFloat(data3.data)+parseFloat(this.dayRevenue);
      // this.totalValue = datatrans3;
      // // console.log(this.totalValue );
      this.totalValue = data3.data.data;
    },
    // 获取目标值
    async getData4() {
      // const url2 = "http://127.0.0.1:8080/merchanthome/daily-transaction-count?year=2023&id=1"
      // const url3 = `http://127.0.0.1:8080/merchanthome/getamount?year=${this.year}&id=1`;
      // const url4 = `http://127.0.0.1:8080/merchanthome/gettarget?id=1`;
      const url4 = `/merchanthome/gettarget?id=1`;
      // console.log(url2)
      const data4 = await this.$http.get(url4);
      console.log("data4", data4.data.code);
      this.havedata4 = data4.data.code;
      if ((this.havadata4 = 1)) {
        // 获取目标值
        const goalValue = this.goal;
        // 创建图表
        this.chart = echarts.init(document.getElementById("chart"));
        this.goal = data4.data.data;
        this.createchart();
      }
      // const datatrans4 = data3.data.data.match(this.regex) ? parseFloat(data3.data.data.match(this.regex)[0]):null;
      // this.totalValue = parseFloat(data3.data)+parseFloat(this.dayRevenue);
      // this.totalValue = datatrans4;
      // console.log(this.totalValue );
      // console.log()
    },

    // 提交目标
    handleSubmit() {
      this.showForm = false;
      this.showChart = true;
      this.show = false;
      // console.log(this.$refs.myForm.fields[0].value); // 输出 goal 值
      // console.log(this.goal); // 输出 goal 值
      // // 获取目标值
      // const goalValue = this.goal;
      // var data = {
      //   id: 1,
      //   target: parseFloat(this.goal), // Convert the target sales to a floating-point number
      // };

      // fetch("http://127.0.0.1:8080/merchanthome/yearly-targets", {
      // // fetch("/merchanthome/yearly-targets", {
      //   method: "POST",
      //   headers: {
      //     "Content-Type": "application/json",
      //   },
      //   body: JSON.stringify(data),
      // })
      //   .then((response) => response.json())
      //   .then((data) => console.log(data));

      this.$http.post('/merchanthome/yearly-targets', {
            "id": 1,
            "target": parseFloat(this.goal),
        }).then(response => {
            console.log('/a1', response.data)
        }, error => {
            console.log('错误', error.message)
        })
  
      this.chart = echarts.init(document.getElementById("chart"));
      this.createchart();
    },
    createchart() {
      // 获取目标值
      const goalValue = this.goal;
      // 创建图表

      // const chart = echarts.init(document.getElementById('chart'));
      // this.chart.setOption(option);
      // this.chart.setOption({
      //   show: false
      // });
      // 配置图表
      const option = {
        color: this.color,
        title: {
          text: "年目标营业额",
          left: "center",
        },
        // tooltip: {
        //   trigger: "item",
        //   formatter: "{a} <br/>{b}: {c} ({d}%)",
        // },
        legend: {
          orient: "vertical",
          x: "left",
          // data: ['A', 'B', 'C', 'D', 'E'],
          show: true,
          selectedMode: false,
        },
        grid: {
          x: 0,
          y: 10,//60
          x2: 0,
          y2: 10,
        },
        series: [
          {
            name:"完成进度",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            animation: true, // 取消动画
            label: {
              show: false,
              // show: true,
              // position: "center",
              // // position: 'inner',
              // formatter: "{d}%",
              // fontSize: 30,
              // fontWeight: "bold",
            },
            // labelLine: {
            //   show: true,
            // },
            // emphasis: {
            //   label: {
            //     show: false,
            //     // show: true,
            //     // fontSize: "30",
            //     // fontWeight: "bold",
            //   },
            // },
            //静态已完成数据
            // data: [
            //   { value: 335, name: 'A' },
            //   { value: 310, name: 'B' },
            //   { value: 234, name: 'C' },
            //   { value: 135, name: 'D' },
            //   { value: 1548, name: 'E' },
            // ],
          },
          // {
          //   type: "scatter",
          //   data: [[0, 0]],
          //   symbolSize: 1,
          //   label: {
          //     position: "inside",
          //     distance: 0,
          //     show: true,
          //     formatter: ["{term|年度目标营业额：}",this.goal,"{term|元}",'{button|修改\n\n\n}',"{term|已完成的营业额：}",this.totalValue,"{term|元}"].join(""),
          //     lineHeight: 20,
          //     align: "center",
          //     rich: {
          //       term: {
          //         fontSize: 13,
          //         // align:"",
          //         // color: "rgb(197, 198, 199)",
          //       },
          //       button: {
          //           height: 20,
          //           width: 30,
          //           backgroundColor: '#337ab7',
          //           color: '#ffffff',
          //           backgroundSize: 'cover', // 调整图像尺寸以适应按钮
          //           // img :src:"../assets/pencil.png",
          //           textAlign: 'center',
          //           lineHeight: 20,
          //           fontSize: 13,
          //           cursor: 'pointer',
          //           events: {
          //              click:function() {
          //               // 在这里定义按钮点击事件的处理逻辑
                      
          //               console.log('按钮被点击了');
          //               this.showFormHandler();
          //           }
          //     }
          //       },
          //     },
              
          //   },
          // },
        ],
        // xAxis: {
        //   axisLabel: {show: false},
        //   axisLine: {show: false},
        //   splitLine: {show: false},
        //   axisTick: {show: false},
        //   min: -1,
        //   max: 1,
        // },
        // yAxis: {
        //   axisLabel: {show: false},
        //   axisLine: {show: false},
        //   splitLine: {show: false},
        //   axisTick: {show: false},
        //   min: -1,
        //   max: 1,
        // },
      };

      // 计算现有静态已完成数据的和
      // this.totalValue = option.series[0].data.reduce((sum, dataItem) => {
      //     return sum + dataItem.value;
      //   }, 0);

      // 数据库数据
      this.getData3();
      console.log(this.totalValue);
      // 更新 data 属性为 goalValue 和现有数据的和
      option.series[0].data = [
        { value: this.totalValue, name: "已完成" },
        { value: goalValue - this.totalValue, name: "待完成" },
      ];
      // // 设置圆环中心的文本
      // option.series[0].label.normal.formatter = function(params) {
      //   return '{d}%\n' + params.seriesName;
      // };

      this.chart.setOption(option);
      // 在这里可以将 goal 值提交到后台进行处理
    },
    onSubmit() {},
    // 表单
    showFormHandler() {
      // Toast(action.text);
      this.showForm = true;
    },
    closeFormHandler() {
      // Toast(action.text);
      this.showForm = false;
    },

    // onSubmit() {
    //   // 在这里处理表单提交事件
    // },
    // 气泡
    onSelect(action) {
      Toast(action.text);
    },
  },
};
</script>

<style lang="less">
.home {
  display: flex;
  flex-direction: row;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;

}
.component {
  margin-bottom: 20px;
}

.component1 {
  margin-right: 10px;
}

.image {
  width: 4rem;
  height: 4rem;
  border-radius: 2rem;
  margin-right: 10px; /* 设置图片与文字之间的水平间隔 */
}

.text {
  margin-top: 20px;
  font-size: 16px;
  /* color:white; */
  font-weight: bold;
}

.base-blue-button {
  //width: 170px;
  //padding-bottom: 20px;
  //border-radius: 10px;
  width: 170rem;
  // padding-bottom: 20rem;
  border-radius: 10rem;

  display: inline-block;
  //padding: 30px 30px;
  /* padding: 3rem 4rem; */
  /* margin: 1px; */
  /* margin: 15px 10px 10px 0px; */
  /* margin:0px; */
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.blue-button {
  .base-blue-button();
  background-color: rgb(109, 184, 255);

}
.blue-button2{
  .base-blue-button();
  background-color: rgb(97, 107, 118);
}
.blue-button:hover {
  // background-color: darkblue; 
}
.blue-button:active {
  background-color: lightblue;
}

.base-red-button {
  //width: 170px;
  //padding-bottom: 20px;
  //border-radius: 10px;


  width: 170rem;
  padding-bottom: 20rem;
  border-radius: 10rem;

  display: inline-block;
  //padding: 30px 30px;
  //padding-bottom: 30px;
  /* padding: 3rem 4rem; */
  /* margin: 1px; */

  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);


  // margin-left: 2px;
}

.red-button {
  .base-red-button();
  background-color: rgb(254, 93, 95);

}

.red-button2{
  .base-red-button();
  background-color: rgb(97, 107, 118);
}

.red-button:hover {
  background-color: darkred;
}
.red-button:active {
  background-color: lightpink;
}

.base-white-button {
  width: 346rem;
  display: inline-block;
  // padding: 30px 90px;
  padding-bottom:30px;
  padding-top:30px;
  /* padding: 3rem 10rem; */
  
  border-radius: 5px;
  /* width: 80%; */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  //border
  //box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.2);
  font-weight: bold;
  // border-left:10px; 
  
}
.white-button1 {
  .base-white-button();
  background-color: rgb(255, 255, 255);
}
.white-button2 {
  .base-white-button();
  background-color: rgb(97, 107, 118);
}

.white-button:hover {
  background-color: lightgray;
}
.white-button:active {
  background-color: lightgray;
}

/* 环形图 */
.boxImage {
  padding: 10px;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}
.align-items-center {
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  min-height: 54px;
}
.pieChartRadius {
  position: relative;
  border-top: 0;
  margin-bottom: 30px;
  width: 100%;
  background: #ffffff;
  border-radius: 0;
  padding: 0px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  border: 1px solid #dce3e6;
  border-radius: 4px;
  -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
  justify-content: center;
  align-items: center;
}


.nav {
  padding: 30px;
}

.nav a {
  font-weight: bold;
  color: #2c3e50;
}

.nav a.router-link-exact-active {
  /* color: #42b983; */
  color: white;
}

.center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.centerButton {
  .center();
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
// .center{
  // font-Size: 30; 
  // font-Weight: bold;
// }


</style>


